<template>
  <div>
    <cube-page :title="title" :showBackButton="false" />
    <div class="view-wrapper">
      <div class="index-list-wrapper">
        <!-- <cube-index-list
          :data="planData"
          :navbar="false"
          @select="selectItem"
          @title-click="clickTitle"
        ></cube-index-list> -->

        <cube-index-list :data="planData" :navbar="false">
          <cube-index-list-group
            v-for="(group, index) in planData"
            :key="index"
            :group="group"
          >
            <cube-index-list-item
              class="spanItem"
              v-for="(item, index) in group.items"
              :key="index"
              :item="item"
              @select="selectItem"
            >

              <div v-if="item.majorName" class="majorDetail">
                <span class="score">{{ item.majorIntro }}</span>
                <a class="more" :href="item.majorLink" target="_blank">[查看详情]</a>
                <span class="clearfix"></span>
              </div>

              <div class="course" v-if="item.courseName">
                <span class="content">
                  {{ item.courseName }}
                </span>
                <span class="score left">学分：{{ item.credit }}</span>
                <span class="bubble green" v-if="item.courseType > 0">{{ item.courseType | courseTypeFilter }}</span>
                <span class="bubble orange" v-if="item.examType">{{ item.examType }}</span>
                <span class="clearfix"></span>
              </div>
            </cube-index-list-item>
          </cube-index-list-group>
        </cube-index-list>
      </div>
    </div>
  </div>
</template>
<script>
import CubePage from "../components/cube-page.vue";
import { getLearnPlan } from "../api/user";

export default {
  components: {
    CubePage
  },
  data() {
    return {
      title: "学习计划",
      majorName: "计算机科学与技术",
      majorIntro: "1111111111111111111111123123213123123123123123123188888",
      planData: []
    };
  },
  created() {
    this.getLearnPlan();
  },
  methods: {
    selectItem(item) {
      console.log(item.name);
    },
    clickTitle(title) {
      console.log(title);
    },
    getLearnPlan() {
      getLearnPlan()
        .then(response => {
          console.log(response);
          let map = {};
          let dest = [];

          if (response.data.major) {
            dest.push({
              id: 0, // 依赖分组字段可自行更改！
              items: [{
                majorName: response.data.major.name,
                majorIntro: response.data.major.intro,
                majorLink: response.data.major.docLink
              }],
              name: '专业：' + response.data.major.name
            });
          }

          for (let i = 0; i < response.data.list.length; i++) {
            let ai = response.data.list[i];
            if (!map[ai.semester]) {
              // 依赖分组字段可自行更改！
              dest.push({
                id: ai.semester, // 依赖分组字段可自行更改！
                items: [ai],
                name: '第' + ai.semester + '学期'
              });
              map[ai.semester] = ai; // 依赖分组字段可自行更改！
            } else {
              for (let j = 0; j < dest.length; j++) {
                let dj = dest[j];
                if (dj.id == ai.semester) {
                  // 依赖分组字段可自行更改！
                  dj.items.push(ai);
                  break;
                }
              }
            }
          }
          this.planData = dest;
        })
        .catch(error => {
          console.log(error);
          this.$toastErrorCode(error);
        });
    }
  },
  filters: {
    courseTypeFilter: function(value) {
      if (!value) return "";

      let result = "";
      switch (value) {
        case 1:
          result = "必修";
          break;
        case 2:
          result = "选修";
          break;
        case 3:
          result = "实践课程";
          break;
        default:
          break;
      }
      return result;
    }
  }
};
</script>

<style lang="stylus" scoped>
.view-wrapper {
  position: fixed;
  top: 44px;
  left: 0;
  bottom: 53px;
  width: 100%;

  .index-list-wrapper {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}

// 用自定义样式，覆写内置的默认样式
.cube-scroll-content {
  top: 44px;
  bottom: 53px;
}

.cube-index-list-content {
  background-color: #222;
  color: #909090;
}

.cube-index-list-anchor {
  background-color: #333;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 20px;
}

.cube-index-list-nav {
  padding: 20px 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);

  >ul {
    >li {
      padding: 3px;
      font-size: 12px;
      color: #909090;

      &.active {
        color: #ffcd32;
      }
    }
  }
}

.header {
  position: relative;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-color: #edf0f4;
  box-shadow: 0 1px 6px #ccc;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 5;

  h1 {
    font-size: 16px;
    font-weight: 700;
  }

  .cubeic-back {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 15px;
    color: #fc9153;
  }
}

.spanItem {
  font-size: 16px;
  text-align: left;
  padding-left: 5%;
  border-bottom: 1px solid #eee;
  margin-top: 10px;
  padding-bottom: 5px;

  .course {
    height: 45px;
  }

  .content {
    display: inline-block;
    width: 100%;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-align: left;
    vertical-align: middle;
    color: #333;
  }

  .score {
    font-size: 12px;
    color: #666;
    line-height: 22px;
  }

  .left {
    float: left;
    margin-right: 10px;
  }

  .bubble {
    float: left;
    font-size: 12px;
    font-weight: normal;
    color: #f92d2d;
    border: 1px solid #f92d2d;
    border-radius: 3px;
    padding: 1px 2px;
    margin: 2px;
  }

  .green {
    color: #fff;
    background-color: #01A65A;
    border: 1px solid #01A65A;
  }

  .orange {
    color: #fff;
    background-color: #f39c12;
    border: 1px solid #f39c12;
  }

  .more {
    float: left;
    font-size: 12px;
    color: #315EFB;
    line-height: 22px;
    position: absolute;
  }

  .majorDetail {
    min-height: 30px;
  }
}

.clearfix {
  clear: both;
}
</style>
